<template>
  <div class="exportDialog">
    <el-dialog
      :title='$t("public.export")'
      :visible.sync="dialogIsShow"
      :close-on-click-modal="false"
      width="60%"
      :before-close="cancelFun">
      <!--导出表头-->
      <div class="table">
        <el-row :gutter="20">
          <el-col class="tableHead">
            <el-checkbox v-model="exportCheckAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{exportDialogTitle}}</el-checkbox>
            <span class="unfold" @click="spreadClickFun(0)" v-show="isShowFlag">{{$t('email.unfolded')}}<i class="el-icon-arrow-down"></i></span>
            <span class="unfold" @click="retractClickFun(0)" v-show="!isShowFlag">{{$t('email.folded')}}<i class="el-icon-arrow-up"></i></span>
          </el-col>
          <div class="exportHead">
            <el-col :span="6" v-for="(item, index) in exportHeads" v-if="filterExportHeads(item)" :key="item.name">
              <el-checkbox-group v-model="checkedExportHeads" @change="handleCheckedChange">
                <el-checkbox :label="item.name" :key="index">{{item.value}}</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </div>
        </el-row>
      </div>
      <!--关联客户-->
      <div class="table" v-if="!isHiddenAssociate" style="margin-top: 20px">
        <el-row :gutter="20">
          <el-col class="tableHead">
            <el-checkbox v-model="exportCustomerCheckAll" :indeterminate="isCustomIndeterminate" @change="handleCheckAllCustomer">{{$t('public.assCustomers')}}</el-checkbox>
            <span class="unfold" @click="spreadClickFun(1)" v-show="isShowCustomerFlag">{{$t('email.unfolded')}}<i class="el-icon-arrow-down"></i></span>
            <span class="unfold" @click="retractClickFun(1)" v-show="!isShowCustomerFlag">{{$t('email.folded')}}<i class="el-icon-arrow-up"></i></span>
          </el-col>
          <div class="exportHead">
            <el-col :span="6" v-for="(item, index) in exportCustomerHeads" :key="index">
              <el-checkbox-group v-model="checkedExportCustomerHeads" @change="handleCheckedCustomer">
                <el-checkbox :label="item.name" :key="index">{{item.value}}</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </div>
        </el-row>
      </div>
      <div class="exportRemark" v-show="isExportTask">
        <span>{{$t('public.exportMarks')}}</span>
        <el-input type="textarea" :placeholder="$t('public.pleaseEnter')" v-model="textarea" maxlength="100" rows="3"></el-input>
      </div>
      <div class="exportLayout" v-if="isCall && !isChatExport">
        <span class="exportLayoutTitle">{{$t('public.exportFileType')}}</span>
        <span class="exportLayoutRadio">
          <el-radio v-model="exportLayout" label="csv">{{$t('public.exportCsvType')}}</el-radio><span class="notice">{{$t('public.csvNotice')}}</span>
          <el-radio v-model="exportLayout" label="excel">{{$t('public.exportExcelType')}}</el-radio>
        </span>
      </div>
      <!-- <div class='DerivedTransferSeats' v-if='showDerivedTransferAgent'>
        <el-checkbox v-model="DerivedTransferSeats"><span>导出流转座席</span></el-checkbox>
      </div> -->
      <span slot="footer">
        <el-button size="small" @click="cancelFun">{{$t('webchat.cancel')}}</el-button>
        <el-button type="primary" size="small" @click="defineFun">{{$t('webchat.determine')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils/m7Utils'
  export default {
    name: 'exportDialog',
    data () {
      return {
        exportCheckAll: true,
        isIndeterminate: true,
        checkedExportHeads: [],
        textarea: '',
        exportLayout: 'csv',
        isShowFlag: true,
        exportCustomerCheckAll: false,
        isCustomIndeterminate: false,
        checkedExportCustomerHeads: [],
        isShowCustomerFlag: true,
        DerivedTransferSeats: false,
        oldCheckedExportHeads: [] // 存储上次的选项 没有就是首次
      }
    },
    props: {
      isCall: Boolean,
      isHiddenAssociate: Boolean, // 是否展示关联客户
      isShow: Boolean, // 是否显示弹窗
      isExportTask: Boolean, // 是否是有导出任务
      exportDialogTitle: String, // 弹窗标题
      exportHeads: Array, // 表头数据
      exportType: String, // 导出类型
      exportCustomerHeads: Array, // 关联客户字段
      showDerivedTransferAgent: Boolean,
      isChatExport: {
        default: false,
        type: Boolean
      }
    },
    computed: {
      dialogIsShow () {
        return this.isShow
      }
    },
    watch:{
      checkedExportCustomerHeads(){
        if(this.exportCustomerHeads){
          this.isCustomIndeterminate = this.checkedExportCustomerHeads.length>0 && this.checkedExportCustomerHeads.length < this.exportCustomerHeads.length
          this.exportCustomerCheckAll = this.checkedExportCustomerHeads.length == this.exportCustomerHeads.length
        }
      }
    },
    methods: {
      filterExportHeads (item) {
        if (item.name === 'TRANSFER_AGENT') {
          return !this.showDerivedTransferAgent
        } else {
          return true
        }
      },
      handleCheckAllChange (value) {
        this.checkedExportHeads = value ? this.exportHeads.map((item, index) => {
          return item.name
        }) : []
        this.isIndeterminate = false
      },
      handleCheckedChange (value) {
        /**
         * 首汽定制字段 TRANSFER_AGENT
         * TRANSFER_AGENT 要与挂机方 HANGUP_USER 关联
         */
        if (this.oldCheckedExportHeads.length > 0) {
          if (this.oldCheckedExportHeads.indexOf('TRANSFER_AGENT') === -1) {
             if (value.indexOf('TRANSFER_AGENT') > -1) {
               // 添加流转座席
               if (value.indexOf('HANGUP_USER') === -1) {
                 this.checkedExportHeads.push('HANGUP_USER')
               }
             }
          }
          if (this.oldCheckedExportHeads.indexOf('HANGUP_USER') > -1) {
             if (value.indexOf('HANGUP_USER') === -1) {
               // 取消挂机方
               if (value.indexOf('TRANSFER_AGENT') > -1) {
                  this.checkedExportHeads.splice(value.indexOf('TRANSFER_AGENT'), 1)
               }
             }
          }
        }
        // if (value.indexOf('TRANSFER_AGENT') > -1 && value.indexOf('HANGUP_USER') === -1) {
        //   this.checkedExportHeads.push('HANGUP_USER')
        // }
        let checkedCount = value.length
        this.exportCheckAll = checkedCount === this.exportHeads.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.exportHeads.length
        this.oldCheckedExportHeads = deepClone(this.checkedExportHeads)
        let sessionId = this.$store.state.session.sessionId
        try { // try catch是因为local存储暴了之后，会报错，影响后面的逻辑进行
          window.localStorage.setItem(sessionId + 'webchatExportHeaders', JSON.stringify(this.oldCheckedExportHeads))
        } catch (e) {}
      },
      handleCheckAllCustomer (value) {
        this.checkedExportCustomerHeads = value ? this.exportCustomerHeads.map(item => {
          return item.name
        }) : []
        this.isCustomIndeterminate = false
      },
      handleCheckedCustomer (value) {
        let checkedCount = value.length
        this.exportCustomerCheckAll = checkedCount === this.exportCustomerHeads.length
        this.isCustomIndeterminate = checkedCount > 0 && checkedCount < this.exportCustomerHeads.length
      },
      defineFun () {
        if (this.checkedExportHeads.length === 0) {
          this.$message.error(this.$t('business.exportSelectOne'))
          return
        }
        let obj = {
          exportType: this.exportType,
          checkedExportHeads: this.checkedExportHeads,
          checkedExportCustomerHeads: this.checkedExportCustomerHeads,
          exportLayout: this.exportLayout,
          textarea: this.textarea,
          DerivedTransferSeats: this.DerivedTransferSeats
        }
        this.$emit('exportDialogDefineFun', obj)
      },
      cancelFun () {
        this.$emit('exportDialogCancelFun')
      },
      spreadClickFun (index) {
        if (index === 0) {
          this.isShowFlag = false
        } else if (index === 1) {
          this.isShowCustomerFlag = false
        }
        let box = document.getElementsByClassName('exportHead')[index]
        box.style.height = '100%'
      },
      retractClickFun (index) { // 收起点击事件
        if (index === 0) {
          this.isShowFlag = true
        } else if (index === 1) {
          this.isShowCustomerFlag = true
        }
        let box = document.getElementsByClassName('exportHead')[index]
        box.style.height = '40px'
      }
    },
    beforeMount () {
      let key = this.$store.state.session.sessionId + 'webchatExportHeaders'
      let webchatExportHeaders = JSON.parse(window.localStorage.getItem(key))
      // this.checkedExportHeads = this.exportHeads.map((item, index) => {
      //   return item.name
      // }) || []
      if(webchatExportHeaders){
        this.checkedExportHeads = webchatExportHeaders
      } else{
        if (this.exportHeads.length) {
          this.exportHeads.forEach((item, index) => {
            if (!item.unChecked) {
              this.checkedExportHeads.push(item.name)
            }
          })
        } else {
          this.checkedExportHeads = []
        }
      }
      console.log(this.checkedExportHeads,'this.checkedExportHeads')
      if (this.exportCustomerHeads && this.exportCustomerHeads.length) {
        this.exportCustomerHeads.forEach((item, index) => {
          if (item.unChecked == false) {
            this.checkedExportCustomerHeads.push(item.name)
          }
        })
      } else {
        this.checkedExportCustomerHeads = []
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '../../../assets/common.styl'
  .table
    border 1px solid #E7E7EB
    padding 0 10px 10px
    .tableHead
      background-color #F4F5F9
      height 36px
      line-height 36px
      margin-bottom 5px
      .unfold
        float right
        color #459AE9
      .unfold:hover
        cursor pointer
  .DerivedTransferSeats
    margin-top 10px
  .exportRemark
    margin-top 10px
    padding-top 10px
    border-top 1px solid #E7E7EB
    span
      display inline-block
      margin-bottom 5px
  .exportHead
    height 40px
    display inline-block
    overflow hidden
  .exportLayout
    .exportLayoutTitle
      margin 10px 15px 0px 0px
      padding-top 10px
      display inline-block
    .notice
      color #3B5998
      display inline-block
      margin-right 40px
</style>
<style lang="stylus">
  .exportDialog
    .tableHead
      .el-checkbox
        .el-checkbox__label
          color #000000
          font-weight 600
    .exportHead
      .el-col-6
        height 20px
    .exportLayoutRadio
      .el-radio:first-child
        margin-right 5px
</style>
